<template>
  <div class="wap-banner">
    <div class="wap-bannerwap-banner">
      <button type="btn" class="wap-banner-btn" @click="wapBannerEditor">编辑</button>
    </div>
    <div class="wap-banner-content">
      <div class="wap-banner-img">
        <img :src="adv.floorPhotoPath" alt="">  
      </div>
      <p class="wap-banner-title" v-show="adv.displayMode == 2">{{adv.floorName}}</p>
    </div>
    <w-panel-fixed-wrap class="cb pop" v-model="show" title="配置楼层广告" width="1000px" height="500px" @on-confirm="closeWin" @on-cancel="hidePopup">
      <form id="addNewBanner" :action="url" method="POST" enctype="multipart/form-data">
        <div class="form-group form-inline">
          <w-label :must="false">是否展示</w-label>
          <w-radio name="isOpen" v-model="params.isOpen" label="0" :validate="false">是</w-radio>
          <w-radio name="isOpen" v-model="params.isOpen" label="1" :validate="false">否</w-radio>
          <span class="marl">设置否，则此楼层不在移动端展示</span>
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">上传图片</w-label>
          <!-- <w-button class="upload">上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png"></w-button> -->
          <div class="upload">
            上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png">
          </div>
          <img class="prev-image" :src="params.floorPhotoId" alt="">
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">标题描述</w-label>
           <w-input name="floorName" :validate="false" v-model="params.floorName"></w-input>
        </div>
        <div class="form-group form-inline">
          <w-label :must="false">排序</w-label>
           <w-input name="sequence" rule="isEmpty|onlyInt" error="必填|只能为数字" v-model="params.sequence"></w-input>
        </div>
        <!-- 关联搜索组件 -->
        <associated-search :max="1" @on-input="getInputValue" @header="setNavigationType"></associated-search>
        <!-- 添加商品和已选商品选项框 -->
        <div class="add-exists-goods" v-show="!params.linkedProductType">
          <product-group :max="1" :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
        </div>
        <!-- 隐藏字段 -->
        <div class="hidden">
          <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
          <input type="hidden" name="accessToken" :value="params.accessToken">
          <input type="hidden" name="sequence" :value="params.sequence">
          <input type="hidden" name="floorType" value="adv4f">
          <input type="hidden" name="displayMode" :value="params.displayMode">
          <input type="hidden" name="id" :value="params.id">
          <input type="hidden" name="decorationType" value="WAP">
          <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
          <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
        </div>
      </form>
    </w-panel-fixed-wrap>
  </div>
</template>
<script>
  // 商品组件
  import productGroup from '../pc/productGroup'

  // 关联商品搜索组件
  import associatedSearch from '../pc/associatedSearch'

  // 关联商品搜索组件
  import floorHeader from '../pc/floorHeader'

  // 获取接口操作对象
  import { apiAdornWAP } from '../../../common/api'

  // 导入api
  import { API } from '../../../common/config'

  // 导入检验的js
  import { validateFloorParam, inSelectedGoodsList } from '../validate'
  import { getFileRealPath } from '../../../common/util'

  export default {
    data() {
      return {
        show: false,
        wordType: 'goods',
        hide: true,
        goodsList: [],
        params: {
          accessToken: this.$store.getters.token,
          decorationType: 'WAP',
          sequence: 0,
          isOpen: 0,
          floorType: 'adv',
          linkedProductType: 0,
          linkedProductUrl: '',
          displayMode: (this.adv.displayMode || 2),
          goodsIdList: '',
          goodsList: [],
          floorName: '',
          floorPhotoId: this.adv.floorPhotoPath,
          isEdit: false
        }
      }
    },
    props: {
      adv: {
        type: Object,
        default: () => { return {} }
      }
    },
    computed: {
      url() {
        // 如果当前是修改状态
        if (this.params.isEdit) {
          return `${API}decoration/updateFloor`
        }
        // 当前是新增状态
        return `${API}decoration/addFloor`
      }
    },
    methods: {
      /**
       * 获取图片的真实路径
       */
      getImageRealPath(file) {
        this.params.floorPhotoId = getFileRealPath(file)
      },

      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.linkedProductType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.linkedProductType = 0
        }
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.linkedProductType = 1
          this.params.linkedProductUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.linkedProductType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornWAP.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }

            // 遍历数据
            data.list.forEach((v) => {
              // 如果当前商品不在已选列表中
              if (!inSelectedGoodsList(v, this.params.goodsList)) {
                this.goodsList.push(v)
              }
            })
          })
        }
      },

      /**
       * 打开编辑或新增界面。如果当前没值，则新增，如果有值，则修改
       * @return {[type]} [description]
       */
      wapBannerEditor() {
        // 展示弹框
        this.show = true

        let goodsIds = []
        // 设置商品列表
        if (this.adv.goodsList) {
          this.adv.goodsList.forEach((v) => {
            goodsIds.push(v.goodsId)
          })
        }

        // 设置banner
        this.params = {
          id: this.adv.id,
          accessToken: this.$store.getters.token,
          decorationType: 'WAP',
          sequence: (this.adv.sequence || 0),
          isOpen: (this.adv.isOpen || 0),
          floorType: 'Banner',
          displayMode: (this.adv.displayMode || 2),
          goodsIdList: goodsIds.join(','),
          goodsList: this.adv.goodsList,
          linkedProductType: 0,
          linkedProductUrl: '',
          floorName: this.adv.displayMode == 1 ? '' : this.adv.floorName,
          floorPhotoId: this.adv.floorPhotoPath,
          isEdit: this.adv.id
        }
      },

      /**
       * 隐藏弹框
       */
      hidePopup() {
        this.goodsList = []
        this.show = false
      },

      /**
       * 展示弹框
       */
      showPopUp() {
        this.show = true
      },

      /**
       * 点击了新增，或者修改banner的时候
       */
      closeWin() {
        // 商品没选，则提示
        if (!validateFloorParam(this.params, false)) {
          return
        }

        // 如果floorName不存在，则设置展示类型为1
        if (!this.params.floorName) {
          this.params.displayMode = 1
          $('input[name=displayMode]').val(1)
        } else {
          this.params.displayMode = 2
          $('input[name=displayMode]').val(2)
        }

        // 调用上传接口
        this.$emit('add', this.hidePopup)
      }
    },
    components: {
      productGroup,
      floorHeader,
      associatedSearch
    }
  }
</script>
<style lang="scss" scoped>
  .prev-image {
    display: inline-block;
    width: auto;
    height: 30px;
    margin-bottom: -10px;
  }
  .w-input {
    display: inline-block;
    margin-right: 24px;
    width: 230px;
  }
  .control-label {
    width: 86px;
    text-align: right;
    display: inline-block;
    margin-right: 40px;
  }
  .m-radio:nth-child(3) {
    margin-left: 30px;
  }
  .marl {
    margin-left: 133px;
    display: inline-block;
  }
  .upload {
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 30px;
    line-height: 26px;
    background-color: #47bdf4;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;

    input[type=file] {
      cursor: pointer;
      position: absolute;
      opacity: 0;
      width: 1000px;
      height: 1000px;
      top: 0px;
      left: 0px;
    }
  }
  .wap-banner {
    margin-top: 10px;
    width: 100%;
    background-color: #fff;
    position: relative;
    .wap-banner-content {
      padding: 0 30px;
      .wap-banner-img {
        width: 100%;
        height: 340px;
        background-color: #ccc;
      }
      .wap-banner-title {
        font-size: 30px;
        padding: 20px 0;
      }
    }
    .wap-bannerwap-banner {
      display: none;
      position: absolute;
      background-color: rgba(222,175,200,0.5);
      z-index: 4;
      width: 100%;
      height: 100%;
      padding: 20px 10px;
      .wap-banner-btn {
        width: 120px;
        height: 40px;
        background-color: #f20685;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        float: right;
      }
    }
    &:hover {
      .wap-bannerwap-banner {
        display: block;
      }
    }
    .pop {
      .class-select {
        border-bottom: 1px solid #e0e0e0;
        padding: 56px 100px;
        margin: 0px -10px;

        .select {
          display: inline-block;
          width: 132px;
          margin-right: 26px;
        }

        .input {
          display: inline-block;
          width: 160px;
        }

        .input-long {
          width: 300px;
        }
      }
      .control-label {
        margin-right: 46px;
      }
      .title {
        background-color: #f2f2f2;
        font-size: 14px;
        height: 52px;
        line-height: 52px;
        margin-left: -30px;
        margin-right: -30px;
        padding-left: 20px;
      }
      .limit {
        font-size: 14px;
        color: #ff7e00;
        padding-left: 44px;
      }
      .search-btn {
        margin: 30px 0px 46px 90px;
      }
    }
  }
</style>